<template>
    <div class="father">
        <h3>父组件</h3>
        <div class="category">
            <Category title="游戏列表">
            <ul>
                <li v-for="index in listTitles" :key="index.id">
                {{ index.id }} ----   {{ index.title }}
                </li>
            </ul>
        </Category>
        <Category title="美食专家">

            <img :src="url">
        </Category>
        </div>
        
    </div>
</template>

<script setup lang="ts" name="Slot">
import { reactive, ref } from 'vue';
import Category from "@/components/demo8/Category.vue";


let listTitles = reactive([
    {id:Math.random(),title:'极品飞车'}, {id:Math.random(),title:'王者荣耀'},
    {id:Math.random(),title:'梦幻西游'}, {id:Math.random(),title:'地下城与勇士'}
])

let url = 'https://z1.ax1x.com/2023/11/19/piNxL04.jPg';

</script>

<style scoped>
.father {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    background-color: #f9f9f9;
}
.category{
    display: flex;
    justify-content: space-evenly;
}
</style>
